<template>
  <div class="dll_body">
    <div class="dll_setting">
      <van-icon name="arrow-left" style="margin-top: 5px; margin-left:10px ;" @click="onClickLeft" />
      <span style="margin-left: 130px;"> 系统设置</span>
    </div>
    <div>
      <div class="dll_set">
        <van-cell title="账号与安全" size="large" is-link to="dll_zhanghao" style="padding-left: 25px;" />
        <van-cell title="隐私设置" size="large" is-link to="" style="padding-left: 25px;" />
      </div>
      <div class="dll_xiaoxi">
        <van-cell title="消息设置" size="large" is-link to="" style="padding-left: 25px;" />
        <van-cell title="跑步设置" size="large" is-link to="" style="padding-left: 25px;" />
       
      </div>
      <div class="dll_bottom">
        <van-cell title="清理缓存" size="large" is-link to="" style="padding-left: 25px;" />
        <van-cell title="隐私管理" size="large" is-link to="" style="padding-left: 25px;" />
        <van-cell title="服务协议" size="large" is-link to="" style="padding-left: 25px;" />
        <van-cell title="关于我们" size="large" is-link to="dll_guanyu" style="padding-left: 25px;" />
      </div>
    </div>
    <van-button round class="tuichu" @click="logOut">退出登录</van-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showConfirmDialog } from "vant";
const message = ref('');
const router = useRouter();
const onClickLeft = () => {
  router.go(-1);
};
const logOut = () => {
  // 退出登录逻辑
  showConfirmDialog({
    title: "您确定要退出吗？",
  })
    .then(async()=>{
      sessionStorage.removeItem("token");
      await router.push("/login");
    })
    .catch(() => {
      
    });
};
</script>

<style lang="scss" scoped>
.tuichu{
  width: 90%;
  background-color:#e23940 ;
  color: white;
 font-size: 16px;
  margin-left: 5%;
  margin-top: 30px
}
.dll_body {
  width: 100%;
  height: 100vh;
  background-color: #F7F7F7;
}

.dll_setting {
  width: 100%;
  display: flex;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;

  background-color: white
}

.dll_set {
  margin-top: 10px;
}
.dll_xiaoxi{
  margin-top: 10px;
}
.dll_bottom{
  margin-top: 10px;
}
</style>
